<!--
 * @Description: 首页
 * @Author: rendc
 * @Date: 2025-09-18 09:17:20
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-12 11:50:53
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易严选</title>
  <!-- icon -->
  <link rel="shortcut icon" href="https://you.163.com/favicon.ico?r=newgold" type="image/x-icon">
  <!-- 引入外部样式表 全局默认样式-->
  <link rel="stylesheet" href="./css/style.css">
  <!-- 引入外部样式表 自定义样式-->
  <link rel="stylesheet" href="./css/style1.css">
  <!-- 引入jquery -->
  <script src="./js/jquery.js"></script>
  <!-- 内联样式表 -->
  <style>
    .app {
      /* border: 1px solid red;  */
      /* width: 100vw; */
      height: 100vh;
    }

    .top {
      /* border: 1px solid red; */
      height: 36px;
      background-color: #333;
      line-height: 36px;
      /* 可以用来控制居中对齐 */
      /* padding-top: 10px; */
      /* padding-bottom: 10px; */
      font-size: 0;
      /* 控制对齐方式 */
      text-align: right;
      padding-right: 95px;
    }

    .top_inner {
      /* border: 1px solid red; */
      /* height: 16px; */
      /* 将div改为行内块元素 w h 生效 不会独占一行空间 */
      display: inline-block;
      /* 字体大小 */
      font-size: 12px;
      /* 字体颜色 */
      color: #ccc;
      /* 字体家族 */
      font-family: 'Heiti SC';
      /* 可以用来控制居中对齐 */
      /* margin-top: 15px; */
      /* 可以用相对定位、绝对定位来控制位置 */
      /* 用来控制元素与元素之间的距离 */
      margin-left: 10px;
    }

    /* 控制光标悬浮后的样式 */
    .top_inner:hover {
      color: #fff;
      /* 光标换为点击小手 */
      cursor: pointer;
    }

    /* 企业采购 */
    .qiyecaigou {
      color: #cc9758;
    }

    .top>*:not(:last-child)::after {
      content: "";
      display: inline-block;
      width: 1px;
      height: 16px;
      /* border-left: 1px solid #5c5c5c; */
      background-color: #5c5c5c;
      margin-left: 10px;
      /* 垂直居中 */
      vertical-align: middle;
    }

    /* top中的下箭头 */
    .down {
      width: 12px;
      /* 相对定位 微调位置 */
      position: relative;
      top: 2px;
      left: 2px;
    }

    /* top中的手机图标 */
    /* top中的手机图标 */
    .phone {
      width: 10px;
      height: 12px;
      /*  */
      display: inline-block;
      /* 相对定位 微调位置 */
      position: relative;
      top: 1px;
      /* left: 2px; */
      background-image: url(./img/图片精灵.png);
    }

    /* 行内元素实现 */
    .phone1 {
      /* span标签是行内元素 wh不生效 */
      /* width: 10px;
      height: 10px; */
      /* 相对定位 微调位置 */
      position: relative;
      /* top: 2px; */
      /* left: 2px; */
      background-image: url(./img/图片精灵.png);
      /* 加内容占位 但是不显示这个内容 */
      color: rgba(255, 255, 255, 0);
    }

    /* 子代选择器 不选最后一个元素 */
    /* .top>*:not(:last-child) {
      color: red;
    } */

    .header {
      /* border: 1px solid red; */
      height: calc(95px + 25px);
    }

    .header_left,
    .header_middle,
    .header_right {
      /* border: 1px solid red; */
      height: 100%;
    }

    /* 3 4 2 */
    /* 1.5 2 1 */
    .header_left {
      /* border: 1px solid red; */
      /* display: block; */
      float: left;
      width: calc(100% / 3);
      height: 95px;
      /* 垂直居中对齐 - 针对单行文本有效 */
      /* line-height: 95px; */
      /* text-align: center; */
      /* 垂直居中对齐 - 针对于行内元素和行内块元素 所以浮动元素默认是块元素 不能使用这个设置项 */
      /* vertical-align: middle; */
      /* 垂直居中对齐 - 定位布局 - 子绝父相*/
      position: relative;
    }

    /* 使用 img 标签实现 */
    /* .header_left_icon {
      width: 212px;
      height: 60px;
      垂直居中对齐 - 定位布局 - 子绝父相
      position: absolute;
      left: calc(50% - 106px);
      top: calc(50% - 30px);
    } */

    /* 实现图片精灵技术实现 */
    .header_left_icon_img {
      /* border: 1px solid red; */
      width: 212px;
      height: 60px;
      background-image: url(./img/图片精灵.png);
      background-position: 0 -300px;
      /* 垂直居中对齐 - 定位布局 - 子绝父相*/
      position: absolute;
      left: calc(50% - 106px);
      top: calc(50% - 30px);
    }

    .header_middle {
      /* border: 1px solid red; */
      /* 修改盒子模型 */
      box-sizing: border-box;
      float: left;
      width: calc(5 / 9 * 100% - 20px);
      padding: 10px;
      padding-top: 25px;
      font-size: 0;
      /* 子绝父项 定位搜索图标 */
      position: relative;
    }

    .header_middle_icon {
      width: 16px;
      /* height: 16px; */
      /* 子绝父项 定位搜索图标 */
      position: absolute;
      left: 27px;
      top: 37px;
    }

    .header_middle_input {
      width: 402px;
      height: calc(38px - 2px);
      border-top-left-radius: 19px;
      border-bottom-left-radius: 19px;
      /* 设置输入框中光标起始位置 */
      padding-left: 38px;
      /* 设置边框颜色 */
      border: 1px solid #CC9756;
      float: left;
    }

    .header_middle_btn {
      width: 90px;
      height: 38px;
      background-color: #CC9756;
      border-top-right-radius: 19px;
      border-bottom-right-radius: 19px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 38px;
      display: inline-block;
    }

    .header_middle_btn:hover {
      background-color: #e2c199;
      cursor: pointer;
    }
    .sliderContainer{
      /* border: 1px solid red; */
      height: 33px;
      overflow: hidden;
    }
    /* div 文字轮播 */
    .slider{
      /* border: 1px solid orange; */
      /* 过渡动画 */
      transition: transform 0.5s ease;
    }
    /* .header_middle_input:active {
      border: 1px solid #CC9756;
    } */

    input:focus {
      /* 移除默认的outline（轮廓线） 统一全局处理*/
      /* outline: none; */
    }

    .header_middle_bottom {
      width: calc(100% - 109px);
      display: inline-block;
      /* border: 1px solid yellowgreen; */
      /* margin-top: 10px; */
      padding: 5px 0;
      font-size: 12px;
      color: #999;
      /* text-align: center; */
      padding-left: 19px;
    }

    .header_middle_bottom>span:not(:last-child):after {
      content: "|";
      /* width: 20px; */
      padding: 8px;
    }

    .header_right {
      /* border: 1px solid red; */
      /* 修改盒子模型 */
      box-sizing: border-box;
      float: right;
      width: calc(1 / 9 * 100%);
      padding-top: 25px;
      /* 子绝父相 - 给购物车文字左右两个图标做定位的*/
      position: relative;
    }

    .header_right_btn {
      width: 134px;
      height: calc(38px - 2px);
      line-height: 38px;
      border: 1px solid #CC9756;
      color: #CC9756;
      border-radius: 19px;
      text-align: center;
    }

    .header_right_btn_before {
      width: 18px;
      height: 18px;
      /* 子绝父相 */
      position: absolute;
      top: calc(29%);
      left: 14px;
      background-image: url(./img/图片精灵.png);
      background-position: 0 -148px;
    }

    .header_right_btn_after {
      width: 19px;
      height: 19px;
      line-height: 19px;
      border-radius: 50%;
      background-color: #FF0036;
      color: #fff;
      text-align: center;
      /* 子绝父相 */
      position: absolute;
      top: calc(29%);
      left: 100px;
    }

    .nav {
      /* border: 1px solid red; */
      /* 居中对齐 */
      text-align: center;
      /* 文字加粗 */
      font-weight: 700;
      /* 字体大小 */
      font-size: 14px;
      /* 字体颜色 */
      color: #000;
    }

    /* 后代选择器 */
    .nav .active {
      /* 字体颜色 */
      color: #CC9756;
      border-bottom: 3px solid #CC9756;
    }

    .nav li {
      /* 清除默认样式 */
      list-style-type: none;
      display: inline-block;
      padding: 0 19px;
      /* cursor: pointer; */
    }

    /* 子代选择器 */
    .nav>li>a {
      padding-bottom: 7px;
    }

    /* 子代选择器 伪类选择器 */
    .nav>li>a:hover {
      color: #CC9756;
      border-bottom: 3px solid #CC9756;
    }

    .lunbo {
      /* border: 1px solid green; */
      height: 420px;
      margin-top: 9px;
      overflow: hidden;
    }

    .lunbo ul {
      width: calc(1920px * 2);
      height: 420px;
      /* 设置动画 */
      animation: kf_swipe 5s steps(4) infinite;
    }

    .lunbo ul:hover {
      animation-play-state: paused;
    }

    .lunbo ul li {
      /* border: 1px solid red; */
      width: 1920px;
      /* display: inline-block; */
      float: left;
      list-style-type: none;
    }

    .lunbo ul li img {
      width: 1920px;
      height: 420px;
    }

    /* 定义轮播图的动画 */
    @keyframes kf_swipe {
      from {
        margin-left: 0;
      }

      to {
        margin-left: -1920px;
      }
    }

    .content {
      /* border: 1px solid red; */
      padding: 0 95px;
      margin-top: 60px;

    }

    .content_header {
      height: 48px;
      padding-bottom: 20px;
      margin-top: 20px;
    }

    .content_header_left {
      float: left;
      font-size: 28px;
      color: #333;
      font-weight: 400;
      width: 132px;
    }

    .content_header_left:hover {
      color: #CC9756;
      cursor: pointer;
    }

    .content_header_center {
      /* border: 1px solid red; */
      width: calc(100% - 132px - 68px - 30px);
      height: 40px;
      line-height: 40px;
      float: left;
      color: #333;
      font-size: 14px;
      text-align: right;
    }

    .content_header_center>a {
      color: #333;
    }

    .content_header_center>a:not(:last-child)::after {
      content: "/";
      margin: 0 10px;
      color: #333;
    }

    /* 人气推荐 */
    .content_renqi {
      background-color: #F6F0EA;
      padding-top: 30px;
      padding-bottom: 30px;
      height: calc(570px + 60px + 30px);
    }

    .content_renqi_card_left {
      /* border: 1px solid red; */
      width: 390px;
      height: 570px;
      float: left;
      background-color: #fff !important;

    }

    .content_renqi_card_left_card>hr,
    .content_renqi_card_right_card>hr {
      border: none;
      height: 2px;
      background-color: #F9F0EA;
    }

    .content_renqi_card_left_card:hover {
      background-color: #fff !important;
      box-shadow: none !important;
    }

    .content_renqi_card_left_card_img {
      width: 390px;
      height: 401px;
      margin-bottom: 50px !important;
      background-color: #fff !important;
      transform: scale(0.85);
      transition: transform 0.5s linear;
    }

    .content_renqi_card_right_card {
      background-color: #fff;
      text-align: center;
    }

    .content_renqi_card_right_card_img {
      width: 180px;
      height: 180px;
      margin-bottom: 10px !important;
    }


    .content_renqi_card_left_card_img:hover {
      background-color: #fff !important;
      transform: scale(0.95);

    }


    .content_renqi_card_left_card_text {
      font-size: 18px !important;
      line-height: 26px !important;
    }

    .content_renqi_card_left_card_text {
      font-size: 13px !important;
      line-height: 21px !important;
    }

    .content_renqi_card_right {
      /* border: 1px solid red; */
      width: calc(100% - 390px - 10px);
      height: 570px;
      float: right;
      display: grid;
      /* grid-template-columns: 223px 223px 223px; */
      grid-template-columns: repeat(auto-fill, 223px);
      /* 整体水平对齐方式 两端对齐 */
      justify-content: space-between;
      /* 行列间距 */
      gap: 10px 0;
      overflow: hidden;
    }

    .content_renqi_card_right_card {
      /* border: 1px solid skyblue; */
      /* width: 223px; */
      height: 280px;
    }

    .renqi {
      text-align: left;
    }

    .renqi>a {
      padding: 0 6px;
      margin-right: 50px;
      padding-bottom: 5px;
    }

    .renqi>.active {
      font-size: 14px;
      color: #b4a078;
      border-bottom: 2px solid #CC9756;
    }

    .renqi>a::after {
      content: "" !important;
      margin: 0px !important;
    }

    .content_header_center>a:hover {
      color: #CC9756;
    }

    .content_header_right {
      float: right;
      width: 68px;
      height: 40px;
      line-height: 40px;
      color: #333;
      font-size: 14px;
      margin-left: 30px;
    }

    .content_header_right>a {
      color: #333;
    }

    .content_header_right>a:hover {
      color: #CC9756;
    }

    .content_img {
      /* border: 1px solid red; */
      background-image: url(./img/居家生活.png);
      background-repeat: no-repeat;
      background-size: cover;
      /* background-position: 0 -45px; */
      width: 1090px;
      height: 310px;
      transition: background-image 0.8s ease;
      margin-bottom: 20px;
    }


    /* 光标悬浮切换背景图片 */
    .content_img:hover {
      background-image: url(./img/运行旅行.png);

    }

    /* .content_img>img {
      width: 1090px;
      height: 310px;
    } */

    .content_card {
      /* border: 1px solid red; */
      /* flex布局 布局容器 */
      display: flex;
      /* 设置元素对齐方式 */
      justify-content: space-between;
      width: 1090px;
      height: 411px;
    }

    .card {
      /* border: 1px solid skyblue; */
      flex-basis: 265px;
      /* width: 265px; */
    }

    .card:hover {
      background-color: #F6F0EA;
      box-shadow: 2px 2px 2px #c2c2c2;
    }

    .card_img {
      /* border: 1px solid red; */
      background-color: #f4f4f4;
      margin-bottom: 26px;
    }

    .card_text {
      font-size: 13px;
      color: #333;
      text-align: center;
      font-weight: 500;
      font-family: 'Heiti SC';
      line-height: 20px;
    }

    .card_text3 {
      color: #d4282d;
    }

    .card_text>span {
      color: #999;
      font-size: 12px;
      /* 删除线 */
      text-decoration: line-through;
      margin-left: 8px;
    }

    /* 使用纯css实现切换img的src */
    /* .card_img {
      content: url("./img/家庭清洁/保湿乳.png");
    } */

    .card:hover .card_img1 {
      content: url("./img/家庭清洁/保湿乳2.png");
    }

    .card:hover .card_img2 {
      content: url("./img/家庭清洁/除湿剂2.png");
    }

    .card:hover .card_img3 {
      content: url("./img/家庭清洁/大魔方2.png");
    }

    .card:hover .card_img4 {
      content: url("./img/家庭清洁/洗洁精2.png");
    }

    /* .card_text>span::before { */
    /* content: " "; */
    /* margin-left: 10px; */
    /* } */
    .content_sticky {
      /* border: 1px solid red; */
      width: 110px;
      height: 364px;
      position: sticky;
      float: left;
      top: 62px !important;
    }

    .content_sticky_kefu {
      /* border: 1px solid red; */
      width: 70px;
      height: 280px;
      float: right;
    }
    .loginDiv{
      /* 关闭窗口 - 默认情况下隐藏元素*/
      display: none;
      background-color: #fff;
      /* 固定定位可以让某个盒⼦不随着滚动条的滚动⽽滚动。 */
      /* 固定定位固定元素是相对于浏览器视口本身 */
      position:fixed;
      /* 定位 */
      top: calc(50% - 158.5px);
      left: calc(50% - 152px);
      /* 更改盒子模型 */
      box-sizing: border-box;
      padding: 58px 40px 83px;
      width: 384px;
      /* width: 304px; */
      height: 458px;
      /* height: 317px; */
      border: 1px solid slategray;
    }
    .loginDivCloseBtn{
      /* 定位 - 子绝父相对 */
      position: absolute;
      top: 7px;
      right: 7px;
      /* border: 1px solid red; */
      width: 24px;
      height: 24px;
      /* 图片精灵技术 */
      background-image: url(./img/close.webp);
      background-position: 4px -170px;
      /* background-position: 0px -331.5px; */
    }

    .loginDiv > .loginDivHeader,.middle,.footer{
      /* border: 1px solid red; */
    }

    .loginDivCloseBtnHeaderBtn:first-child::after{
      content: "";
      display: inline-block;
      width: 1px;
      height: 16px;
      /* border-left: 1px solid #5c5c5c; */
      background-color: #5c5c5c;
      margin-left: 20px;
      /* 垂直居中 */
      vertical-align: middle;
    }

    .loginDivCloseBtnHeaderBtn{
      display: inline-block;
      width: 50%;
      text-align: center;
      color: #999;
      font-style: 18px;
      /* border: 1px solid red; */
    }

    .loginDivCloseBtnHeaderBtnChecked{
      color: #333;
    }

    .loginDiv > .middle{
      border: 1px solid red;
      height: 165px;
    }
    .loginDiv >.footer{
      text-align: center;
      color: white;
      font-size: 18px;
      background-color: #b4a078;
      height: 48px;
      line-height: 48px;
      border-radius: 2px;
    }
  </style>
</head>

<body>
  <!-- 网易严选 -->
  <div class="app">
    <!-- 顶部黑色背景 登录注册 功能栏  -->
    <div class="top">
      <!-- 1. 绑定事件 -->
      <div class="top_inner" onclick="clickLoginBtn(event)">登录/注册</div>
      <div class="top_inner">我的订单</div>
      <!-- style="border-left:1px solid #ccc ;" -->
      <div class="top_inner"> 甄选家</div>
      <div class="top_inner qiyecaigou">
        企业采购
        <img class="down" src="./img/下箭头.png" alt="图片丢失">
      </div>
      <div class="top_inner">
        客户服务
        <img class="down" src="./img/下箭头.png" alt="图片丢失">
      </div>
      <div class="top_inner">
        <!-- <img class="phone" src="./img/手机.png" alt="图片丢失"> -->
        <div class="phone"></div>
        <!-- 使用行内元素处理 -->
        <!-- 1. 行内元素可以设置背景图片 -->
        <!-- <span class="phone1">12</span> -->
        APP
      </div>
    </div>
    <!-- icon 搜索框 部分 -->
    <div class="header">
      <div class="header_left">
        <!-- 图标 -->
        <!-- <img class="header_left_icon" src="./img/网易严选.png" alt="图片丢失"> -->
        <!-- 使用图片精灵技术 -->
        <div class="header_left_icon_img">
          <!-- 图片精灵技术 -->
        </div>
      </div>
      <div class="header_middle">
        <img class="header_middle_icon" src="./img/搜索.png" alt="">
        <input class="header_middle_input" type="text" placeholder="🌟9.9元得桂花香">
        <div class="header_middle_btn">搜索</div>
        <div id="changePageNumBtnDiv" style="color:#999; width:532px;font-size: 12px;text-align: center;">
          <span style="cursor: pointer;" id="goToPreBtn" onclick="goToPre()">上一页</span>
          <!-- js中会在这里动态添加如下页码span元素 -->
          <!-- <span onclick="goToPage(1)">1</span> -->
          <span style="cursor: pointer;"  id="goToNextBtn" onclick="goToNext()">下一页</span>
        </div>
        <!-- div 文字轮播 垂直滚动 -->
        <!-- 轮播的外层容器 -->
        <div class="sliderContainer">
          <div id="slider" class="slider">
            <div class="header_middle_bottom">
              <span>🌟第一页</span>
              <span>🌟9.9元得桂花香</span>
              <span>咖啡</span>
              <span>毛巾</span>
              <span>牙膏</span>
              <span>耳机</span>
              <span>口罩</span>
            </div>
            <div class="header_middle_bottom">
              <span>🌟第二页</span>
              <span>🌟9.9元得桂花香</span>
              <span>咖啡</span>
              <span>毛巾</span>
              <span>牙膏</span>
              <span>耳机</span>
              <span>口罩</span>
            </div>
            <div class="header_middle_bottom">
              <span>🌟第三页</span>
              <span>🌟9.9元得桂花香</span>
              <span>咖啡</span>
              <span>毛巾</span>
              <span>牙膏</span>
              <span>耳机</span>
              <span>口罩</span>
            </div>
            <div class="header_middle_bottom">
                <span>🌟第四页</span>
                <span>🌟9.9元得桂花香</span>
                <span>咖啡</span>
                <span>毛巾</span>
                <span>牙膏</span>
                <span>耳机</span>
                <span>口罩</span>
            </div>
            <div class="header_middle_bottom">
                <span>🌟第五页</span>
                <span>🌟9.9元得桂花香</span>
                <span>咖啡</span>
                <span>毛巾</span>
                <span>牙膏</span>
                <span>耳机</span>
                <span>口罩</span>
              </div>
            </div>
          </div>
      </div>
      <div class="header_right">
        <div class="header_right_btn_before"></div>
        <div class="header_right_btn">购物车</div>
        <div class="header_right_btn_after">0</div>
      </div>
    </div>
    <!-- 标题栏 -->
    <div class="nav">
      <!-- <ul> -->
      <li><a class="active" href="">首页</a></li>
      <li><a href="">居家生活</a></li>
      <li><a href="">宠物生活</a></li>
      <li><a href="">服饰鞋包</a></li>
      <li><a href="">美食酒水</a></li>
      <li><a href="">个护清洁</a></li>
      <li><a href="">母婴亲子</a></li>
      <li><a href="">运动旅行</a></li>
      <li><a href="">数码家电</a></li>
      <li><a href="">严选全球</a></li>
      <li><a href="">为你严选</a></li>
      <li><a href="">众筹</a></li>
      <!-- </ul> -->
    </div>
    <!-- 轮播图 -->
    <div class="lunbo">
      <ul>
        <li>
          <img src="./img/1.png" alt="">
        </li>
        <li>
          <img src="./img/1.png" alt="">
        </li>
      </ul>
    </div>
    <!-- 热销榜div -->
    <div>
      <img class="content_sticky" src="./img/热销榜.png" alt="">
      <img class="content_sticky content_sticky_kefu" src="./img/在线客服.png" alt="">
      <!-- 新品首发 -->
      <div class="content">
        <div class="content_header">
          <div class="content_header_left">新品首发</div>
          <div class="content_header_center">
            <a href="">洗衣液</a>
            <a href="">驱蚊防虫</a>
            <a href="">洗衣凝珠</a>
            <a href="">家清卫浴</a>
            <a href="">衣物护理</a>
            <a href="">香氛除味</a>
            <a href="">清洁用具</a>
          </div>
          <div class="content_header_right">
            <a href="">查看更多></a>
          </div>
        </div>
        <!-- 新品首发的卡片区域 -->
        <div class="content_card">
          <!-- 使用flex布局 -->
          <div class="card">
            <!-- 贯标悬浮切换图片一般使用js实现 -->
            <img class="card_img1 card_img" src="./img/家庭清洁/保湿乳.png" alt="">
            <div class="card_text">肌初水嫩/盈润乳液120ml</div>
            <div class="card_text">（原活颜保湿乳）</div>
            <div class="card_text card_text3">¥89<span>¥139</span></div>
          </div>
          <div class="card">
            <!-- 贯标悬浮切换图片一般使用js实现 -->
            <img class="card_img2 card_img" src="./img/家庭清洁/除湿剂.png" alt="">
            <div class="card_text">抑菌防霉可替换防潮除湿桶</div>
            <div class="card_text">除湿盒收纳神器</div>
            <div class="card_text card_text3">¥5.5<span>¥6.9</span></div>
          </div>
          <div class="card">
            <!-- 贯标悬浮切换图片一般使用js实现 -->
            <img class="card_img3 card_img" src="./img/家庭清洁/大魔方.png" alt="">
            <div class="card_text">大魔方蓝泡泡洁厕块洁厕剂</div>
            <div class="card_text">马桶清洁去垢抑菌留清洁剂</div>
            <div class="card_text card_text3">¥14.9<span>¥19.9</span></div>
          </div>
          <div class="card">
            <!-- 贯标悬浮切换图片一般使用js实现 -->
            <img class="card_img4 card_img" src="./img/家庭清洁/洗洁精.png" alt="">
            <div class="card_text">椰椰植萃洗洁精 食品级A类</div>
            <div class="card_text">标准</div>
            <div class="card_text card_text3">¥18.9<span>¥22.9</span></div>
          </div>

        </div>
      </div>
      <!-- 人气推荐 -->
      <div class="content content_renqi">
        <div class="content_header">
          <div class="content_header_left">人气推荐</div>
          <div class="content_header_center renqi">
            <a class="active" href="">编辑推荐</a>
            <a href="">热销总榜</a>
          </div>
          <div class="content_header_right">
            <a href="">更多推荐></a>
          </div>
        </div>
        <!-- 人气推荐的卡片区域 -->
        <!-- 左右布局 -->
        <div class="content_renqi_card_left">
          <div class="card content_renqi_card_left_card">
            <!-- 贯标悬浮切换图片一般使用js实现 -->
            <img class="card_img content_renqi_card_left_card_img" src="./img/人气推荐/牛奶.png" alt="">
            <hr>
            <div class="card_text content_renqi_card_left_card_text">纽仕兰新西兰4.0g蛋白全/低脂</div>
            <div class="card_text content_renqi_card_left_card_text">纯牛奶 24盒</div>
            <div class="card_text card_text3 content_renqi_card_left_card_text">¥95<span>¥109</span></div>
          </div>
        </div>
        <div class="content_renqi_card_right">
          <div class="content_renqi_card_right_card">
            <img class="card_img content_renqi_card_left_card_img content_renqi_card_right_card_img"
              src="./img/人气推荐/牛奶.png" alt="">
            <hr>
            <div class="card_text content_renqi_card_right_card_text">纽仕兰新西兰4.0g蛋白全/低脂
            </div>
            <div class="card_text content_renqi_card_right_card_text">纯牛奶 24盒</div>
            <div class="card_text card_text3 content_renqi_card_right_card_text">
              ¥95<span>¥109</span></div>
          </div>
          <div class="content_renqi_card_right_card">
            <img class="card_img content_renqi_card_left_card_img content_renqi_card_right_card_img"
              src="./img/人气推荐/牛奶.png" alt="">
            <hr>
            <div class="card_text content_renqi_card_right_card_text">纽仕兰新西兰4.0g蛋白全/低脂
            </div>
            <div class="card_text content_renqi_card_right_card_text">纯牛奶 24盒</div>
            <div class="card_text card_text3 content_renqi_card_right_card_text">
              ¥95<span>¥109</span></div>
          </div>
          <div class="content_renqi_card_right_card">
            <img class="card_img content_renqi_card_left_card_img content_renqi_card_right_card_img"
              src="./img/人气推荐/牛奶.png" alt="">
            <hr>
            <div class="card_text content_renqi_card_right_card_text">纽仕兰新西兰4.0g蛋白全/低脂
            </div>
            <div class="card_text content_renqi_card_right_card_text">纯牛奶 24盒</div>
            <div class="card_text card_text3 content_renqi_card_right_card_text">
              ¥95<span>¥109</span></div>
          </div>
          <div class="content_renqi_card_right_card">
            <img class="card_img content_renqi_card_left_card_img content_renqi_card_right_card_img"
              src="./img/人气推荐/牛奶.png" alt="">
            <hr>
            <div class="card_text content_renqi_card_right_card_text">纽仕兰新西兰4.0g蛋白全/低脂
            </div>
            <div class="card_text content_renqi_card_right_card_text">纯牛奶 24盒</div>
            <div class="card_text card_text3 content_renqi_card_right_card_text">
              ¥95<span>¥109</span></div>
          </div>
          <div class="content_renqi_card_right_card">
            <img class="card_img content_renqi_card_left_card_img content_renqi_card_right_card_img"
              src="./img/人气推荐/牛奶.png" alt="">
            <hr>
            <div class="card_text content_renqi_card_right_card_text">纽仕兰新西兰4.0g蛋白全/低脂
            </div>
            <div class="card_text content_renqi_card_right_card_text">纯牛奶 24盒</div>
            <div class="card_text card_text3 content_renqi_card_right_card_text">
              ¥95<span>¥109</span></div>
          </div>
          <div class="content_renqi_card_right_card">
            <img class="card_img content_renqi_card_left_card_img content_renqi_card_right_card_img"
              src="./img/人气推荐/牛奶.png" alt="">
            <hr>
            <div class="card_text content_renqi_card_right_card_text">纽仕兰新西兰4.0g蛋白全/低脂
            </div>
            <div class="card_text content_renqi_card_right_card_text">纯牛奶 24盒</div>
            <div class="card_text card_text3 content_renqi_card_right_card_text">
              ¥95<span>¥109</span></div>
          </div>
        </div>

      </div>
      <!-- 家庭清洁 -->
      <div class="content">
        <div class="content_header">
          <div class="content_header_left">家庭清洁</div>
          <div class="content_header_center">
            <a href="">洗衣液</a>
            <a href="">驱蚊防虫</a>
            <a href="">洗衣凝珠</a>
            <a href="">家清卫浴</a>
            <a href="">衣物护理</a>
            <a href="">香氛除味</a>
            <a href="">清洁用具</a>
          </div>
          <div class="content_header_right">
            <a href="">查看更多></a>
          </div>
        </div>
        <div class="content_img">
          <!-- <img src="./img/运行旅行.png" alt=""> -->
        </div>
        <!-- 内容区的卡片区域 -->
        <div class="content_card">
          <!-- 使用flex布局 -->
          <div class="card">
            <!-- 贯标悬浮切换图片一般使用js实现 -->
            <img class="card_img1 card_img" src="./img/家庭清洁/保湿乳.png" alt="">
            <div class="card_text">肌初水嫩/盈润乳液120ml</div>
            <div class="card_text">（原活颜保湿乳）</div>
            <div class="card_text card_text3">¥89<span>¥139</span></div>
          </div>
          <div class="card">
            <!-- 贯标悬浮切换图片一般使用js实现 -->
            <img class="card_img2 card_img" src="./img/家庭清洁/除湿剂.png" alt="">
            <div class="card_text">抑菌防霉可替换防潮除湿桶</div>
            <div class="card_text">除湿盒收纳神器</div>
            <div class="card_text card_text3">¥5.5<span>¥6.9</span></div>
          </div>
          <div class="card">
            <!-- 贯标悬浮切换图片一般使用js实现 -->
            <img class="card_img3 card_img" src="./img/家庭清洁/大魔方.png" alt="">
            <div class="card_text">大魔方蓝泡泡洁厕块洁厕剂</div>
            <div class="card_text">马桶清洁去垢抑菌留清洁剂</div>
            <div class="card_text card_text3">¥14.9<span>¥19.9</span></div>
          </div>
          <div class="card">
            <!-- 贯标悬浮切换图片一般使用js实现 -->
            <img class="card_img4 card_img" src="./img/家庭清洁/洗洁精.png" alt="">
            <div class="card_text">椰椰植萃洗洁精 食品级A类</div>
            <div class="card_text">标准</div>
            <div class="card_text card_text3">¥18.9<span>¥22.9</span></div>
          </div>

        </div>
      </div>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <!-- 登录注册的弹窗 -->
    <div id="loginDiv" class="loginDiv">
      <!-- 关闭按钮 -->
      <div class="loginDivCloseBtn" onclick="clickLoginDivCloseBtn(event)"></div>
      <div class="loginDivHeader">
        <div class="loginDivCloseBtnHeaderBtn loginDivCloseBtnHeaderBtnChecked" onclick="clickLoginDivCloseBtnHeaderBtn(1,event)">手机号登录</div><div class="loginDivCloseBtnHeaderBtn"  onclick="clickLoginDivCloseBtnHeaderBtn(2,event)">邮箱登录</div>
      </div>
      <div class="middle">
        <div id="phone">phone</div>
        <div id="email" style="display: none;">email</div>
      </div>
      <div class="footer">
        登录
      </div>
    </div>
  </div>
</body>
<script>
  // div 文字轮播 垂直滚动 slider
  var slider = $("#slider");
  // console.log('🤡 CC - slider.children:', slider[0].children.length);
  // console.log('🤡 CC - slider.children.length:', slider.children.length);
  // 轮播元素的高度
  var itemHeight = $(".header_middle_bottom")[0].offsetHeight;
  // console.log('🤡 CC - itemHeight:', itemHeight);
  // 轮播的当前页
  var sliderIndex = 0;
  // 轮播的总页数total
  var sliderTotal = slider[0].children.length - 1;
  // 更新轮播图的实际位置
  function updatePosition() {
    // 计算偏移量
    var position = -sliderIndex * itemHeight;
    slider[0].style.transform = 'translateY('+position+'px)';
  }
  // 定位上一页标签
  // var toPreBtn = $("#goToPreBtn");
  // 定位下一页标签
  var toNextBtn = $("#goToNextBtn");
  // 添加页码按钮<span onclick="goToPage(1)">1</span>
  for (let i = 0; i <= sliderTotal; i++) {
    // console.log('🤡 CC - i:', i);
    var span = $('<span>').html(i+1);
    span.css({
      padding:"0 3px",
      cursor: "pointer",
    });
    // 添加兄弟元素
    toNextBtn.before(span);
  }
  // 事件代理 2种方式 
  // addEventListener
  // $("#changePageNumBtnDiv").on('click','span', function (event) {
  //   // 执行翻页
  //   goToPage(event.target.innerHTML);
  // })
  $("#changePageNumBtnDiv").on('mouseenter','span', function (event) {
    // 执行翻页
    console.log('🤡 CC - event.target.innerHTML:', event.target.innerHTML);
    if (event.target.innerHTML == "上一页") {
      goToPre();
    }else if (event.target.innerHTML == "下一页") {
      goToNext();
    }else{
      goToPage(event.target.innerHTML);
    }
  })

  // 手动翻页-上一页
  function goToPre(){
    console.log('🤡 CC - goToPre - goToPre:',);
    sliderIndex-=1;
    console.log('🤡 CC - goToPre - sliderIndex-1:', );
    if (sliderIndex<0) {
      sliderIndex=sliderTotal;
    }
    updatePosition();
    console.log('🤡 CC - goToPre - sliderIndex-2:', );
  }
  // 手动翻页-指定页
  function goToPage(pageNum){
    sliderIndex=pageNum-1;
    updatePosition();
  }
  // 手动翻页-下一页
  function goToNext(){
    sliderIndex+=1;
    if (sliderIndex>sliderTotal) {
      sliderIndex=0;
    }
    updatePosition();
  }
  // // 定时执行 
  // setInterval(() => {
  //   if (sliderIndex > sliderTotal) {
  //     // 如果轮播到最后一张，那么回到第一张
  //     sliderIndex = 0;
  //   }
  // updatePosition();
  //   // 每次轮播 sliderIndex ++
  //   sliderIndex++;
  // }, 1000);
  // // }, 200000);

  // 登录注册的弹窗上切换手机号登录or邮箱登录模式的按钮
  function clickLoginDivCloseBtnHeaderBtn(flag,e){
    var target = e.target;
    // 找兄弟元素
    // console.log('🤡 CC - clickLoginDivCloseBtnHeaderBtn - e:', e);
    e.target.parentElement.children[0].className = "loginDivCloseBtnHeaderBtn";
    e.target.parentElement.children[1].className = "loginDivCloseBtnHeaderBtn";
    // e.target.parentElement.children[0].style.color = "#999";
    // e.target.parentElement.children[1].style.color = "#999";
    // e.target.parentElement.child
    target.className+=" loginDivCloseBtnHeaderBtnChecked";
    // target.style.color = "#333";
    if(flag === 1){
      // console.log("手机号登录");
      // 显示手机号登录的表单
      $("#email").css({
        display:'none',
      });
      $("#phone").css({
        display:'block',
      });
    }else{
      // console.log("邮箱登录");
      // 显示邮箱登录的表单
      $("#phone").css({
        display:'none',
      });
      $("#email").css({
        display:'block',
      });
    }
  }
  // 登录注册按钮的事件处理程序
  function clickLoginBtn(e){
    // console.log('🤡 CC - clickLoginBtn - 登录注册按钮被点击');
    // 确定要关闭的元素 loginDiv
    var loginDiv = document.getElementById("loginDiv");
    loginDiv.style.display = 'block';
  }
  // 关闭登录注册的弹窗
  function clickLoginDivCloseBtn(e){
    // console.log('🤡 CC - clickLoginDivCloseBtn - 关闭登录注册的弹窗');
    // 关闭窗口
    // 确定要关闭的元素 loginDiv
    var loginDiv = document.getElementById("loginDiv");
    loginDiv.style.display = 'none';
  }
</script>
</html>